<template xmlns:v-action="">
    <a-card :bordered="false">
        <div class="table-page-search-wrapper">
            <a-form layout="inline" ref="queryPmsCategoryForm" :form="queryPmsCategoryForm">

                <a-row :gutter="48">
                    <a-col :md="8" :sm="24">
                        <a-form-item label="父级编号">
                            <a-input v-decorator="['parentNo',{ rules: [{ required: false}] }]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="类目编号">
                            <a-input v-decorator="['categoryNo',{ rules: [{ required: false}] }]"/>
                        </a-form-item>
                    </a-col>
                    <template v-if="advanced">
                    <a-col :md="8" :sm="24">
                        <a-form-item label="类目中文名称">
                            <a-input v-decorator="['categoryNameCn',{ rules: [{ required: false}] }]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="品类名称路径">
                            <a-input v-decorator="['categoryNamePath',{ rules: [{ required: false}] }]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="类目英文名称">
                            <a-input v-decorator="['categoryNameEn',{ rules: [{ required: false}] }]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="类目级别">
                            <a-input v-decorator="['categoryLevel',{ rules: [{ required: false}] }]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="类目路径，包含所有上级id，逗号分隔，系统创建">
                            <a-input v-decorator="['categoryRank',{ rules: [{ required: false}] }]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="是否是末级类目，系统判断=1 是 =0 否">
                            <a-input v-decorator="['isLeaf',{ rules: [{ required: false}] }]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="是否保质期管理">
                            <a-input v-decorator="['isShelflife',{ rules: [{ required: false}] }]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="安全类别">
                            <a-input v-decorator="['securityCategory',{ rules: [{ required: false}] }]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="执行标准">
                            <a-input v-decorator="['exstandard',{ rules: [{ required: false}] }]"/>
                        </a-form-item>
                    </a-col>
                    </template>
                    <a-col :md="!advanced && 8 || 24" :sm="24">
                    <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                      <a-button type="primary" @click="handleSearchPmsCategory">查询</a-button>
                      <a-button style="margin-left: 8px" @click="handleSearchResetPmsCategory">重置</a-button>
                      <a @click="toggleAdvanced" style="margin-left: 8px">
                        {{ advanced ? '收起' : '展开' }}
                        <a-icon :type="advanced ? 'up' : 'down'"/>
                      </a>
                    </span>
                    </a-col>
                </a-row>
            </a-form>
        </div>

        <div class="table-operator">
            <a-button type="primary" v-action:pms_pmsCategory_add icon="plus" @click="handleAddPmsCategory">新建</a-button>
            <a-dropdown v-if="selectedRowKeys.length > 0">
                <a-menu slot="overlay">
                    <a-menu-item key="1" v-action:pms_pmsCategory_delete @click="handleBatchDeletePmsCategory"><a-icon type="delete" />删除</a-menu-item>
                    <!-- lock | unlock -->
                    <a-menu-item key="2"><a-icon type="lock" />扩展</a-menu-item>
                </a-menu>
                <a-button style="margin-left: 8px">
                    批量操作 <a-icon type="down" />
                </a-button>
            </a-dropdown>
        </div>

        <!-- 列表  -->
        <s-table
                ref="table"
                size="default"
                rowKey="categoryId"
                :columns="columns"
                :data="loadData"
                :alert="{ show: true, clear: true }"
                :rowSelection="{ selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange }"
        >
            <template v-for="(col, index) in columns" v-if="col.scopedSlots" :slot="col.dataIndex" slot-scope="text">
                <div :key="index">
                    <template>{{ text }}</template>
                </div>
            </template>
            <template slot="status" slot-scope="text">
                <div v-if="text==1">启用</div>
                <div v-if="text==0">关闭</div>
            </template>
            <span slot="action" slot-scope="text, record">
        <a @click="handleEditPmsCategory(record)">编辑</a>
        <a-divider type="vertical" />
        <a-dropdown>
          <a class="ant-dropdown-link">
            更多 <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a href="javascript:" @click="handleDetailPmsCategory(record)" >详情</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:" v-if="record.statusEnable==1" @click="handleDisableStatusPmsCategory(record)">关闭</a>
              <a href="javascript:" v-if="record.statusEnable==0" @click="handleDisableStatusPmsCategory(record)">启用</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:" @click="handleDeletePmsCategory(record)">删除</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>
        </s-table>
        <!--   新建表单 -->
        <a-modal
                title="新建"
                :width="800"
                v-model="addModelVisible"
                :confirmLoading="addConfirmLoading"
                @ok="handleSavePmsCategory"
        >
            <a-form :form="addPmsCategoryForm">
                        <a-form-item
                                :labelCol="labelCol"
                                :wrapperCol="wrapperCol"
                                label="ID"
                                validateStatus="success"
                                hasFeedback >
                            <a-input v-decorator="[ 'categoryId',{ rules: [{ required: false, message: '主键' }] }]" disabled="disabled"/>
                        </a-form-item>
                        <a-form-item
                                :labelCol="labelCol"
                                :wrapperCol="wrapperCol"
                                label="父级编号"
                                hasFeedback >
                            <a-input v-decorator="[ 'parentNo',{ rules: [{ required: false, message: '父级编号' }] }]"/>
                        </a-form-item>
                        <a-form-item
                                :labelCol="labelCol"
                                :wrapperCol="wrapperCol"
                                label="类目编号"
                                hasFeedback >
                            <a-input v-decorator="[ 'categoryNo',{ rules: [{ required: false, message: '类目编号' }] }]"/>
                        </a-form-item>
                        <a-form-item
                                :labelCol="labelCol"
                                :wrapperCol="wrapperCol"
                                label="类目中文名称"
                                hasFeedback >
                            <a-input v-decorator="[ 'categoryNameCn',{ rules: [{ required: false, message: '类目中文名称' }] }]"/>
                        </a-form-item>
                        <a-form-item
                                :labelCol="labelCol"
                                :wrapperCol="wrapperCol"
                                label="品类名称路径"
                                hasFeedback >
                            <a-input v-decorator="[ 'categoryNamePath',{ rules: [{ required: false, message: '品类名称路径' }] }]"/>
                        </a-form-item>
                        <a-form-item
                                :labelCol="labelCol"
                                :wrapperCol="wrapperCol"
                                label="类目英文名称"
                                hasFeedback >
                            <a-input v-decorator="[ 'categoryNameEn',{ rules: [{ required: false, message: '类目英文名称' }] }]"/>
                        </a-form-item>
                        <a-form-item
                                :labelCol="labelCol"
                                :wrapperCol="wrapperCol"
                                label="类目级别"
                                hasFeedback >
                            <a-input v-decorator="[ 'categoryLevel',{ rules: [{ required: false, message: '类目级别' }] }]"/>
                        </a-form-item>
                        <a-form-item
                                :labelCol="labelCol"
                                :wrapperCol="wrapperCol"
                                label="类目路径，包含所有上级id，逗号分隔，系统创建"
                                hasFeedback >
                            <a-input v-decorator="[ 'categoryRank',{ rules: [{ required: false, message: '类目路径，包含所有上级id，逗号分隔，系统创建' }] }]"/>
                        </a-form-item>
                        <a-form-item
                                :labelCol="labelCol"
                                :wrapperCol="wrapperCol"
                                label="是否是末级类目，系统判断=1 是 =0 否"
                                hasFeedback >
                            <a-input v-decorator="[ 'isLeaf',{ rules: [{ required: false, message: '是否是末级类目，系统判断=1 是 =0 否' }] }]"/>
                        </a-form-item>
                        <a-form-item
                                :labelCol="labelCol"
                                :wrapperCol="wrapperCol"
                                label="是否保质期管理"
                                hasFeedback >
                            <a-input v-decorator="[ 'isShelflife',{ rules: [{ required: false, message: '是否保质期管理' }] }]"/>
                        </a-form-item>
                        <a-form-item
                                :labelCol="labelCol"
                                :wrapperCol="wrapperCol"
                                label="安全类别"
                                hasFeedback >
                            <a-input v-decorator="[ 'securityCategory',{ rules: [{ required: false, message: '安全类别' }] }]"/>
                        </a-form-item>
                        <a-form-item
                                :labelCol="labelCol"
                                :wrapperCol="wrapperCol"
                                label="执行标准"
                                hasFeedback >
                            <a-input v-decorator="[ 'exstandard',{ rules: [{ required: false, message: '执行标准' }] }]"/>
                        </a-form-item>
                <a-divider />
            </a-form>
        </a-modal>
        <!--   编辑表单 -->
        <a-modal
                title="编辑"
                :width="800"
                v-model="editModelVisible"
                :confirmLoading="editConfirmLoading"
                @ok="handleUpdatePmsCategory"
        >
            <a-form :form="editPmsCategoryForm">
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="ID"
                        validateStatus="success"
                        hasFeedback >
                    <a-input v-decorator="[ 'categoryId',{ rules: [{ required: false, message: '主键' }] }]" disabled="disabled"/>
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="父级编号"
                        hasFeedback >
                    <a-input v-decorator="[ 'parentNo',{ rules: [{ required: false, message: '父级编号' }] }]" disabled="disabled"/>
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="类目编号"
                        hasFeedback >
                    <a-input v-decorator="[ 'categoryNo',{ rules: [{ required: false, message: '类目编号' }] }]" disabled="disabled"/>
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="类目中文名称"
                        hasFeedback >
                    <a-input v-decorator="[ 'categoryNameCn',{ rules: [{ required: false, message: '类目中文名称' }] }]" disabled="disabled"/>
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="品类名称路径"
                        hasFeedback >
                    <a-input v-decorator="[ 'categoryNamePath',{ rules: [{ required: false, message: '品类名称路径' }] }]" disabled="disabled"/>
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="类目英文名称"
                        hasFeedback >
                    <a-input v-decorator="[ 'categoryNameEn',{ rules: [{ required: false, message: '类目英文名称' }] }]" disabled="disabled"/>
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="类目级别"
                        hasFeedback >
                    <a-input v-decorator="[ 'categoryLevel',{ rules: [{ required: false, message: '类目级别' }] }]" disabled="disabled"/>
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="类目路径，包含所有上级id，逗号分隔，系统创建"
                        hasFeedback >
                    <a-input v-decorator="[ 'categoryRank',{ rules: [{ required: false, message: '类目路径，包含所有上级id，逗号分隔，系统创建' }] }]" disabled="disabled"/>
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="是否是末级类目，系统判断=1 是 =0 否"
                        hasFeedback >
                    <a-input v-decorator="[ 'isLeaf',{ rules: [{ required: false, message: '是否是末级类目，系统判断=1 是 =0 否' }] }]" disabled="disabled"/>
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="是否保质期管理"
                        hasFeedback >
                    <a-input v-decorator="[ 'isShelflife',{ rules: [{ required: false, message: '是否保质期管理' }] }]" disabled="disabled"/>
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="安全类别"
                        hasFeedback >
                    <a-input v-decorator="[ 'securityCategory',{ rules: [{ required: false, message: '安全类别' }] }]" disabled="disabled"/>
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="执行标准"
                        hasFeedback >
                    <a-input v-decorator="[ 'exstandard',{ rules: [{ required: false, message: '执行标准' }] }]" disabled="disabled"/>
                </a-form-item>
                <a-divider />
            </a-form>
        </a-modal>
    </a-card>
</template>

<script>
    import { STable } from '@/components'
    import api from '@/api'
    import { deletePmsCategory, updatePmsCategory, addPmsCategory, batchDeletePmsCategory } from '@/api/pmsCategoryApi'

    export default {
        name: 'PmsCategoryList',
        data () {
        return {
            description: '',
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            },
            queryPmsCategoryForm: this.$form.createForm(this, { name: 'query_form' }),
            addModelVisible: false,
            addConfirmLoading: false,
            addPmsCategoryForm: this.$form.createForm(this, { name: 'add_form' }),
            editPmsCategoryForm: this.$form.createForm(this, { name: 'edit_form' }),
            editPmsCategoryRecord: {},
            editModelVisible: false,
            editConfirmLoading: false,
            // 高级搜索 展开/关闭
            advanced: false,
            // 查询参数
            queryParam: {
            },
            // 表头

            columns: [
                {
                    title: '父级编号',
                    dataIndex: 'parentNo',
                    // width: '100',
                    sorter: false,
                    // scopedSlots: { customRender: '' },
                    needTotal: false
                },
                {
                    title: '类目编号',
                    dataIndex: 'categoryNo',
                    // width: '100',
                    sorter: false,
                    // scopedSlots: { customRender: '' },
                    needTotal: false
                },
                {
                    title: '类目中文名称',
                    dataIndex: 'categoryNameCn',
                    // width: '100',
                    sorter: false,
                    // scopedSlots: { customRender: '' },
                    needTotal: false
                },
                {
                    title: '品类名称路径',
                    dataIndex: 'categoryNamePath',
                    // width: '100',
                    sorter: false,
                    // scopedSlots: { customRender: '' },
                    needTotal: false
                },
                {
                    title: '类目英文名称',
                    dataIndex: 'categoryNameEn',
                    // width: '100',
                    sorter: false,
                    // scopedSlots: { customRender: '' },
                    needTotal: false
                },
                {
                    title: '类目级别',
                    dataIndex: 'categoryLevel',
                    // width: '100',
                    sorter: false,
                    // scopedSlots: { customRender: '' },
                    needTotal: false
                },
                {
                    title: '类目路径，包含所有上级id，逗号分隔，系统创建',
                    dataIndex: 'categoryRank',
                    // width: '100',
                    sorter: false,
                    // scopedSlots: { customRender: '' },
                    needTotal: false
                },
                {
                    title: '是否是末级类目，系统判断=1 是 =0 否',
                    dataIndex: 'isLeaf',
                    // width: '100',
                    sorter: false,
                    // scopedSlots: { customRender: '' },
                    needTotal: false
                },
                {
                    title: '是否保质期管理',
                    dataIndex: 'isShelflife',
                    // width: '100',
                    sorter: false,
                    // scopedSlots: { customRender: '' },
                    needTotal: false
                },
                {
                    title: '安全类别',
                    dataIndex: 'securityCategory',
                    // width: '100',
                    sorter: false,
                    // scopedSlots: { customRender: '' },
                    needTotal: false
                },
                {
                    title: '执行标准',
                    dataIndex: 'exstandard',
                    // width: '100',
                    sorter: false,
                    // scopedSlots: { customRender: '' },
                    needTotal: false
                },
                {
                    table: '操作',
                    dataIndex: 'action',
                    width: '150',
                    scopedSlots: { customRender: 'action' }
                }
            ],
            // 加载数据方法 必须为 Promise 对象
            loadData: parameter => {
            return this.$http.get(api.pmsCategoryUrl, {
                    params: Object.assign(parameter, this.queryParam)
                }).then(res => {
                    return res.data
                })
            },
            selectedRowKeys: [],
            selectedRows: []
        }
        },
        components: {
            STable
        },
         methods: {
             // 搜索查询
             handleSearchPmsCategory () {
                 this.queryParam = this.queryPmsCategoryForm.getFieldsValue()
                 this.loadData = parameter => {
                     return this.$http.get(api.pmsCategoryUrl, {
                     params: Object.assign(parameter, this.queryParam)
                     }).then(res => {
                     return res.data
                     })
                 }
                 this.$refs.table.refresh()
             },
             // 搜索重置
             handleSearchResetPmsCategory () {
                 this.queryPmsCategoryForm.resetFields()
             },
             handleChangePmsCategory (value, key, column, record) {
                 record[column.dataIndex] = value
             },
             handleEditPmsCategory (record) {
                 this.editPmsCategoryRecord = Object.assign({}, record)
                 this.editModelVisible = true
                 this.$nextTick(() => {
                     let values = this.editPmsCategoryForm.getFieldsValue()
                     for(let key in values) {
                     values[key] = this.editPmsCategoryRecord[key];
                     this.editPmsCategoryForm.setFieldsValue(values)
                 }
             })
             },
             // 新增
             handleAddPmsCategory () {
                 this.addPmsCategoryRecord = {}
                 this.addModelVisible = true
                 this.addPmsCategoryForm.resetFields();
             },
             // 批量删除
             handleBatchDeletePmsCategory () {
                 // console.log('===============handleBatchDelete', this.selectedRowKeys)
                 // console.log('===============handleBatchDelete', this.selectedRowKeys[0])
                 let ids = this.selectedRowKeys
                 let params = this.selectedRowKeys
                 const that = this
                 this.$confirm({
                     title: '警告',
                     content: `真的要批量删除 ${ids.length} 个吗?`,
                     okText: '删除',
                     okType: 'danger',
                     cancelText: '取消',
                     onOk () {
                         // 在这里调用删除接口
                         return new Promise((resolve, reject) => {
                             batchDeletePmsCategory(params)
                             .then(res => {
                                 that.$refs.table.clearSelected()
                                         that.$refs.table.refresh()
                                         that.$notification['success']({
                                             message: '提示',
                                             description: res.msg || '删除成功',
                                             duration: 8
                                         })
                                 resolve()
                             }).catch((err) => {
                             reject(err)
                             that.$notification['error']({
                                 message: '提示',
                                 description: err.msg || '删除失败',
                                 duration: 8
                             })
                         })
                     }).catch(() => console.log('Oops errors!'))
                     },
                     onCancel () {
                         console.log('Cancel')
                     }
                 })
             },
             edit (row) {
                 row.editable = true
                 // row = Object.assign({}, row)
             },
             // eslint-disable-next-line
             handleDeletePmsCategory (row) {
                 const that = this
                 this.$confirm({
                     title: '警告',
                     content: `真的要删除吗?`,
                     okText: '删除',
                     okType: 'danger',
                     cancelText: '取消',
                     onOk () {
                         // 在这里调用删除接口
                         return new Promise((resolve, reject) => {
                             deletePmsCategory(row.categoryId)
                     .then(res => {
                             that.$refs.table.refresh()
                                     that.$notification['success']({
                                         message: '提示',
                                         description: res.msg || '删除成功',
                                         duration: 8
                                     })
                             resolve()
                         }).catch((err) => {
                             reject(err)
                             that.$notification['error']({
                                 message: '提示',
                                 description: err.msg || '删除失败',
                                 duration: 8
                             })
                         })
                     }).catch(() => console.log('Oops errors!'))
                     },
                     onCancel () {
                         console.log('Cancel')
                     }
                 })
             },
             handleDetailPmsCategory (row) {
                 // console.log('============ handleDetail')
             },
             handleDisableStatusPmsCategory (row) {
                 const that = this
                 let txt = row.statusEnable === 1 ? '关闭' : '启用'
                 this.$confirm({
                     title: '警告',
                     content: `真的要${txt}吗?`,
                     okText: txt,
                     okType: 'danger',
                     cancelText: '取消',
                     onOk () {
                         // 在这里调用更新接口
                         return new Promise((resolve, reject) => {
                             let params = { 'categoryId': row.categoryId,
                                 'statusEnable': row.statusEnable === 1 ? 0 : 1 }
                             updatePmsCategory(row.categoryId, params)
                     .then(res => {
                             that.$refs.table.refresh()
                                     that.$notification['success']({
                                         message: '提示',
                                         description: res.msg || '操作成功',
                                         duration: 8
                                     })
                             resolve()
                         }).catch((err) => {
                             reject(err)
                             that.$notification['error']({
                                 message: '提示',
                                 description: err.msg || '操作失败',
                                 duration: 8
                             })
                         })
                     }).catch(() => console.log('Oops errors!'))
                     },
                     onCancel () {
                         console.log('Cancel')
                     }
                 })
             },
             // 保存
             handleSavePmsCategory () {
                 // console.log('model data', this.addRecord)
                 this.addPmsCategoryForm.validateFields((err, values) => {
                     if (err) {
                         return;
                     }
                   //  console.log('Received values of addPmsCategoryForm: ', values);
                     this.addRecord = values
                     this.addConfirmLoading = true;
                     // 新增操作
                     addPmsCategory(this.editRecord)
                        .then(res => {
                         this.$notification['success']({
                             message: '提示',
                             description: res.msg || '操作成功',
                             duration: 8
                         })
                         this.addPmsCategoryForm.resetFields();
                         this.addModelVisible = false;
                         this.addConfirmLoading = false;
                         this.$refs.table.refresh()
                    })
                 .catch((err) => {
                     this.addConfirmLoading = false;
                     this.$notification['error']({
                         message: '提示',
                         description: err.msg || '操作失败',
                         duration: 8
                     })
                 });
             });
             },
             // 更新
             handleUpdatePmsCategory () {
                 console.log('model data', this.editRecord)
                 this.editPmsCategoryForm.validateFields((err, values) => {
                     if (err) {
                         return;
                     }
                     // console.log('Received values of editPmsCategoryForm: ', values);
                     this.editPmsCategoryRecord = values
                     this.editConfirmLoading = true;
                     // 更新操作
                     updatePmsCategory(this.editRecord.categoryId, this.editRecord)
                             .then(res => {
                         this.$notification['success']({
                             message: '提示',
                             description: res.msg || '操作成功',
                             duration: 8
                         })
                         this.editPmsCategoryForm.resetFields();
                         this.editModelVisible = false;
                         this.editConfirmLoading = false;
                         this.$refs.table.refresh()
                     })
                     .catch((err) => {
                             this.editConfirmLoading = false;
                         this.$notification['error']({
                             message: '提示',
                             description: err.msg || '操作失败',
                             duration: 8
                         })
                     });
                 });
             },
             onSelectChange (selectedRowKeys, selectedRows) {
                 this.selectedRowKeys = selectedRowKeys
                 this.selectedRows = selectedRows
             },
             toggleAdvanced () {
                 this.advanced = !this.advanced
             }
         }
     }
 </script>

 <style lang="less" scoped>
     .search {
         margin-bottom: 54px;
     }

     .fold {
         width: calc(100% - 216px);
         display: inline-block
     }

     .operator {
         margin-bottom: 18px;
     }

     @media screen and (max-width: 900px) {
         .fold {
             width: 100%;
         }
     }
 </style>
